<template>
  <section id="features" class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">我们如何工作：独特的双闭环驱动机制</h2>
        <p class="text-gray-600 max-w-2xl mx-auto">通过数据与沟通的双重闭环，为康复过程提供科学、高效的支持体系</p>
      </div>

      <div class="grid md:grid-cols-2 gap-10 items-center">
        <!-- 数据闭环 -->
        <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow relative overflow-hidden group">
          <div class="absolute top-0 right-0 w-32 h-32 bg-blue-200 rounded-full blur-2xl opacity-50 group-hover:opacity-70 transition-opacity"></div>
          <h3 class="text-2xl font-bold mb-6 text-blue-700">数据闭环</h3>
          
          <div class="relative z-10">
            <div class="flex flex-col md:flex-row items-center mb-8">
              <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">学</div>
              <div class="text-gray-700">收集学习过程中的各项数据指标</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center mb-8">
              <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">析</div>
              <div class="text-gray-700">智能分析数据，识别优势与短板</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center mb-8">
              <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">策</div>
              <div class="text-gray-700">制定个性化康复训练策略</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center mb-8">
              <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">练</div>
              <div class="text-gray-700">执行针对性训练计划</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center mb-8">
              <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">馈</div>
              <div class="text-gray-700">获取实时反馈与效果评估</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center">
              <div class="w-16 h-16 rounded-full bg-blue-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">优</div>
              <div class="text-gray-700">持续优化方案，形成良性循环</div>
            </div>
            
            <!-- 连接线 -->
            <div class="hidden md:block absolute left-16 top-24 bottom-24 w-0.5 bg-blue-300"></div>
          </div>
        </div>

        <!-- 沟通闭环 -->
        <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-shadow relative overflow-hidden group">
          <div class="absolute top-0 right-0 w-32 h-32 bg-purple-200 rounded-full blur-2xl opacity-50 group-hover:opacity-70 transition-opacity"></div>
          <h3 class="text-2xl font-bold mb-6 text-purple-700">沟通闭环</h3>
          
          <div class="relative z-10">
            <div class="flex flex-col md:flex-row items-center mb-10">
              <div class="w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">指导</div>
              <div class="text-gray-700">康复师提供专业指导与训练计划</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center mb-10">
              <div class="w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">答疑</div>
              <div class="text-gray-700">家长与康复师实时互动，解答疑问</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center mb-10">
              <div class="w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">反馈</div>
              <div class="text-gray-700">家长反馈孩子训练情况与进步</div>
            </div>
            
            <div class="flex flex-col md:flex-row items-center">
              <div class="w-16 h-16 rounded-full bg-purple-600 text-white flex items-center justify-center text-xl font-bold mb-4 md:mb-0 md:mr-6">调整</div>
              <div class="text-gray-700">康复师根据反馈调整训练方案</div>
            </div>
            
            <!-- 连接线 -->
            <div class="hidden md:block absolute left-16 top-24 bottom-24 w-0.5 bg-purple-300"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 双闭环展示区无需额外逻辑
</script>
